<template>
  <div class="quota_main">
    <div class="quota_main_top">
      <span>定额{{ num === "1" ? "主材" : "辅材" }}（{{ $route.query.quotaName || "--" }}）</span>
    </div>
    <div class="quota_main_center">
      <div class="quota_main_center_top">
        <el-radio-group v-model="data.checkValue" @change="handelChange">
          <el-radio value="1" size="large">根据商品添加</el-radio>
          <el-radio value="2" size="large">根据组合条件</el-radio>
        </el-radio-group>
      </div>
      <div class="quota_main_center_botton" v-if="data.checkValue == 1">
        <div>
          定额{{ num === "1" ? "主材" : "辅材" }}成本：<span>¥{{ data.costTotalMoney }}</span>
        </div>

        <div>
          <el-button type="primary" plain @click="handelClickAddCommodity">添加材料</el-button>
        </div>
      </div>
    </div>
    <div class="quota_main_botton" v-if="data.checkValue == 1">
      <el-table :data="data.quotaDate" class="jzt-table" stripe>
        <template #empty>
          <el-empty description="这里暂时什么都没有" />
        </template>
        <el-table-column label="序号" type="index" width="60"></el-table-column>
        <el-table-column label="材料名称" prop="productAliasName"></el-table-column>
        <el-table-column label="规格" prop="skuSpecification"></el-table-column>
        <el-table-column label="单位" prop="productType">
          <template #default="scope">
            {{ useCodeArrStore().getDictName("shop_unit", scope.row.productType) }}
          </template>
        </el-table-column>
        <el-table-column label="单价成本" prop="costUnitPrice"></el-table-column>
        <el-table-column v-if="checkType !== 2" label="数量" prop="productNum" width="180">
          <template #default="scope">
            <el-input-number :min="0" type="number" v-model="scope.row.productNum"></el-input-number>
          </template>
        </el-table-column>
        <el-table-column label="商品质保日期" prop="warrantyTime">
          <template #default="{ row }">
            <span>{{ row.warrantyTime || 0 }}个月</span>
          </template>
        </el-table-column>
        <el-table-column prop="remark" label="备注" width="240">
          <template #default="scope">
            <RemarkEditor v-model="scope.row.remark" :title="'修改备注'" :isEdit="true" />
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template #default="scope">
            <el-popconfirm title="确认删除?" @confirm="handelClickDeletPepol(scope.row)">
              <template #reference>
                <el-button link type="primary">删除</el-button>
              </template>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 根据组合条件 -->
    <div class="condition-wrap" v-if="data.checkValue == 2">
      <div class="combination_content">
        <div class="left">
          <el-tree
            ref="treeeRef"
            style="max-width: 600px"
            node-key="categoryId"
            highlight-current
            :data="data.treeList"
            :props="defaultProps"
            @node-click="handleNodeClick"
          />
        </div>
        <div class="center">
          <div class="center_header">
            <div class="center_header_child">
              <span>价格范围：</span>
              <el-input-number v-model="forms.minValue" :controls="false" @change="handelChangeMin"></el-input-number>
              <span style="margin: 0 6px">至</span>
              <el-input-number v-model="forms.maxValue" :controls="false" @change="handelChangeMin"></el-input-number>
            </div>
            <div class="center_header_child">
              <span>{{ num === "1" ? "主材" : "辅材" }}数量：</span>
              <el-input-number v-model="forms.limitProductNum" :controls="false" @change="handelChangeMin"></el-input-number>
            </div>
            <div class="center_header_child">
              <span>限制金额：</span>
              <el-input-number v-model="forms.limitProductMoney" :controls="false" @change="handelChangeMin"></el-input-number>
            </div>
          </div>
          <div class="center_content">
            <p style="text-align: right">
              当前
              <span style="color: #ff3333">{{ currTotalNum }}</span>
              个商品
            </p>
            <!-- 属性筛选组件 -->
            <AttrFilterCom ref="AttrFilterComRef" :filterData="filterData" @changeAttr="changeAttr" />
          </div>
        </div>
        <div class="right">
          <!-- <div class="header">已选中：共{{ totalNum }}个商品</div> -->
          <div class="header">已选中</div>
          <div class="child_item" v-for="(item, index) in data.choseTreeList" :key="index">
            <div class="child_item_title">
              <span>{{ item.preview }}</span>
              <el-icon @click="handelClickDeleteItem(item, index)"><Delete /></el-icon>
            </div>
            <ul>
              <li v-for="(citem, cindex) in item.list" :key="cindex">
                {{ citem.stastsName }}
                <!-- <el-icon @click="handelClickDeleteCItem(item, citem)"><Close /></el-icon> -->
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>

    <div class="footer">
      <div class="left pl12">
        <template v-if="data.checkValue == 1">
          <el-checkbox
            class="any-select-any"
            v-model="checkType"
            label="设为款式任选数量"
            :true-value="2"
            :false-value="1"
            size="large"
          />
          <p class="ml20">共：{{ data.quotaDate.length }}款</p>
          <p class="ml20" v-if="checkType === 2">
            <span><i>*</i>任选数量</span>
            <el-input-number
              class="jzt-input-number"
              v-model="productCheckedNum"
              :min="0"
              :max="10000"
              placeholder="输入选择数量"
              controls-position="right"
            />
          </p>
        </template>
      </div>
      <div class="right">
        <el-button class="jzt-button" type="info" size="large" @click="handelClickGoToBak">返回</el-button>
        <el-button type="primary" size="large" @click="handelClickSuerAddd">确认添加</el-button>
      </div>
    </div>
    <!-- 选择商品弹框 -->
    <commodityView
      :type="num"
      :show="data.commodityVisible"
      :width="'1200px'"
      @close="handelClose"
      @submit="handelSubmit"
    ></commodityView>
  </div>
</template>
<script setup>
import { reactive, ref, onMounted, watch } from "vue";
import { useRouter, useRoute } from "vue-router";
import check from "@/static/images/check.png";
import { Delete, Close } from "@element-plus/icons-vue";
import { ElMessage } from "element-plus";
import useCodeArrStore from "@/store/modules/select";
// 组件
import commodityView from "./commodityView.vue";
// api
import {
  categoryList,
  getSpListPage,
  queryStastsList,
  saveOrUpdateCb,
  saveOrUpdateQuotaProductCondition,
  quotaProductLists,
  quotaProductConditionList
} from "@/apis/createFile/index.js";
import AttrFilterCom from "@/components/AttrFilterCom";
import { findAncestorsById, param } from "@/utils";
import RemarkEditor from "@/components/RemarkEditor";
// 变量定义
const treeeRef = ref();
const filterData = ref([]);
const filterDataCopy = ref([]);
const router = useRouter();
const route = useRoute();
const filterVal = ref([]);
const data = reactive({
  checkValue: "1", //'1'-添加   '2'-编辑
  treeList: [],
  screenList: [],
  // 选中的树结构
  choseTreeList: [],
  categoryId: "",
  commodityVisible: false, //显示商品弹框
  quotaDate: [],
  costTotalMoney: 0,
  costTotalPrice: 0,
  quoteTotalMoney: 0,
  code: ""
});
const num = ref(route.query.num);
const AttrFilterComRef = ref();
const currTotalNum = ref(0);
const totalNum = ref(0); //选中分类下共x个商品
const defaultProps = {
  children: "children",
  label: "label"
};
const productCheckedNum = ref(null);
const checkType = ref(1);

// ===================================================================================

const getMax = () => {
  let totalNum = null;
  data.quotaDate.map(item => {
    totalNum += item.productNum;
  });
  return totalNum;
};

// 确认导入后的最后数据
const handelSubmit = (list, code) => {
  data.code = code;
  console.log(list, "list", code);
  // data.quotaDate = list;
  getquotaProductList();
  data.commodityVisible = false;
};
const handelClickDeletPepol = item => {
  let index = data.quotaDate.findIndex(citem => citem.businessSkuId === item.businessSkuId);
  if (index > -1) {
    // console.log("删除的index===", index);
    data.quotaDate.splice(index, 1);
  }
};
const forms = ref({
  maxValue: 0,
  minValue: 0,
  limitProductNum: 0,
  limitProductMoney: 0
});
// 限制范围添加最大最小值事件时
const handelChangeMin = () => {
  const { maxValue, minValue, limitProductNum, limitProductMoney } = forms.value;

  data.choseTreeList.map((it, i) => {
    if (i == choseMax.value) {
      it.minValue = minValue;
      it.maxValue = maxValue;
      it.limitProductNum = limitProductNum;
      it.limitProductMoney = limitProductMoney;
    }
  });
  console.log(data.choseTreeList, "data.choseTreeList");
};
// 确认添加
const handelClickSuerAddd = () => {
  if (data.checkValue == 1) {
    if (checkType.value === 2 && productCheckedNum.value === null) {
      return ElMessage({
        message: "请输入“任选数量”",
        type: "error"
      });
    }
    const parms = {
      quotaId: route.query.quotaId,
      infoReqList: data.quotaDate,
      productType: route.query.num,
      productCheckedNum: Number(productCheckedNum.value), //任选可选数量
      checkType: checkType.value
    };
    saveOrUpdateCb(parms).then(() => {
      ElMessage({
        type: "success",
        message: "添加成功"
      });
      router.go(-1);
    });
  } else {
    data.choseTreeList.map(it => {
      it.productProList = it.list;
    });
    const parms = {
      quotaId: route.query.quotaId,
      conditonList: data.choseTreeList,
      productType: route.query.num
    };
    console.log(parms, "parms");
    saveOrUpdateQuotaProductCondition(parms).then(res => {
      if (res.code == 200) {
        ElMessage({
          type: "success",
          message: "添加成功"
        });
        router.go(-1);
      }
    });
  }
};
// 添加商品
const handelClickAddCommodity = () => {
  data.commodityVisible = true;
};
const handelClose = () => {
  data.commodityVisible = false;
};
// 返回
const handelClickGoToBak = () => {
  // router.go(-1);
  router.push({ path: "/quota-template", query: { quotaId: route.query.quotaId } });
};
// 方法定义
const handelChange = v => {
  console.log(v);
  route.query.mainProductShowType = v;
};
const handelClickChose = item => {
  item.checked = !item.checked;
};
// 删除已选中的整条
const handelClickDeleteItem = item => {
  console.log(33333333333, data.choseTreeList);
  let it = data.choseTreeList.findIndex(citem => citem.categoryId == item.categoryId);
  if (it > -1) {
    data.choseTreeList.splice(it, 1);
  }

  const currNode = treeeRef.value.getCurrentNode();
  console.log(99999, currNode.categoryId, item.categoryId);
  if (currNode.categoryId === item.categoryId) {
    AttrFilterComRef.value.setDefault([], []); //清空AttrFilterCom组件选中回显状态---二级
    filterData.value = JSON.parse(JSON.stringify(filterDataCopy.value)); //清空AttrFilterCom组件选中回显状态---三级
  }

  currTotalNum.value = 0;
  // getTotal();
};
// 删除某一项已选中的
const handelClickDeleteCItem = (item, citem) => {
  let it = item.list.findIndex(c => c.stastsId == citem.stastsId);
  if (it > -1) {
    item.list.splice(it, 1);
  }
};
// 获取树形结构
const getCategoryList = () => {
  const parms = {
    page: 1,
    size: 9999,
    productType: num.value === "1" ? 1 : 2
  };
  categoryList(parms)
    .then(res => {
      console.log(res);
      res.data.map(it => {
        it.label = it.name;
        if (it.children.length > 0) {
          it.children.map(item => {
            item.label = item.name;
            if (item.children.length > 0) {
              item.children.map(item2 => {
                item2.label = item2.name;
              });
            }
          });
        }
      });
      data.treeList = res.data;
    })
    .catch(err => {
      console.log(err);
    });
};

//属性筛选id改变时的回调
const _filterVal = ref([]);
const _filterVal3 = ref([]);
const _brandIds = ref([]);
const changeAttr = (val, item, item2, index, filterVal, filterVal3, brandIds) => {
  console.log("AAAAAAAAAAAAAAAAAAAAAA", filterVal, filterVal3, brandIds);
  const currNode = treeeRef.value.getCurrentNode();
  const choseTreeListIds = data.choseTreeList.map(choseObj => choseObj.categoryId);
  if (choseTreeListIds.includes(currNode.categoryId)) {
  } else {
    handleNodeClick2(currNode);
  }

  _filterVal.value = filterVal;
  _filterVal3.value = filterVal3;
  _brandIds.value = brandIds;

  const attrIds2 = _filterVal.value.flat(); //选中的二级属性ids
  for (let ids2 of attrIds2) {
    const str = _filterVal3.value.find(item => typeof item === "string" && item.includes(ids2));
    !str && _filterVal3.value.push(ids2);
  }
  const Arr3 = []; //_filterVal3数据处理成不含 - 的ids集合
  _filterVal3.value.map(item => {
    if (item.includes("-")) {
      Arr3.push(item.split("-")[1]);
    } else {
      Arr3.push(item);
    }
  });

  // 二级
  // console.log(filterVal.flat());

  const _filterData = JSON.parse(JSON.stringify(filterData.value));
  const _filterDataFlat = convertToFlat(_filterData);
  const _filterVal2 = filterVal.flat();
  console.log(_filterVal2, _filterDataFlat);
  data.choseTreeList.map(it => {
    if (it.categoryId == data.categoryId) {
      const selected3Arr = _filterDataFlat.filter(_obj => Arr3.includes(_obj.stastsId));
      it.list = selected3Arr;
      it.brandIds = brandIds;
    }
  });
  console.log("选中的===", data.choseTreeList);
  getTotal();
};

const changeAttr3 = (val, item, item2, index, filterVal, filterVal3, brandIds) => {
  const _filterData = JSON.parse(JSON.stringify(filterData.value));
  const _filterDataFlat = convertToFlat(_filterData);
  const _filterVal3 = filterVal3.map(obj => {
    return obj.split("-")[1];
  });
  console.log(_filterVal3, _filterDataFlat);
  data.choseTreeList.map(it => {
    if (it.categoryId == data.categoryId) {
      const selected3Arr = _filterDataFlat.filter(_obj => _filterVal3.includes(_obj.stastsId));
      console.log("选中的===", selected3Arr);
      it.list = selected3Arr;
    }
  });
};

const convertToFlat = treeData => {
  let flatData = [];

  for (let i = 0; i < treeData.length; i++) {
    if (treeData[i].children) {
      flatData.push(...convertToFlat(treeData[i].children));
      delete treeData[i].children;
    }
    flatData.push({ ...treeData[i] });
  }
  return flatData;
};

// 点击树结构
const choseMax = ref(0); //树结构选中的项匹配右侧选中的数据添加限制最准备
const handleNodeClick = async v => {
  console.log(v, "获取的树结构");
  if (v.children.length > 0) return; // 判断是否有子节点，如果有则直接返回，否则
  handleNodeClick2(v);
  const parms = {
    categoryId: v.categoryId,
    productType: route.query.num
  };
  await queryStastsList(parms)
    .then(res => {
      console.log(res);
      // res.data.map(it => {
      //   if (it.children?.length > 0) {
      //     it.children.map(it2 => {
      //       it2.checked = false;
      //       // 反显选中的数据
      //       if (data.choseTreeList.length > 0) {
      //         data.choseTreeList.map(chsoeItem => {
      //           chsoeItem.list.map(chsoeItem2 => {
      //             if (chsoeItem2.stastsId == it2.stastsId && v.categoryId == chsoeItem.categoryId) {
      //               it2.checked = true;
      //               // 反显限制范围
      //               forms.value.minValue = chsoeItem.minValue;
      //               forms.value.maxValue = chsoeItem.maxValue;
      //               forms.value.limitProductNum = chsoeItem.limitProductNum;
      //               forms.value.limitProductMoney = chsoeItem.limitProductMoney;
      //             }
      //           });
      //         });
      //       }
      //       if (it2.children?.length > 0) {
      //         it2.children.map(it3 => {
      //           it3.checked = false;
      //         });
      //       }
      //     });
      //   }
      // });

      // 回显限制范围
      if (data.choseTreeList.length > 0) {
        data.choseTreeList.map(chsoeItem => {
          if (v.categoryId == chsoeItem.categoryId) {
            forms.value.minValue = chsoeItem.minValue;
            forms.value.maxValue = chsoeItem.maxValue;
            forms.value.limitProductNum = chsoeItem.limitProductNum;
            forms.value.limitProductMoney = chsoeItem.limitProductMoney;
          }
        });
      }
      data.screenList = res.data;
      filterData.value = res.data;
      filterDataCopy.value = JSON.parse(JSON.stringify(res.data));
      AttrFilterComRef.value.reset();

      if (data.checkValue === "2") {
        // 编辑
        data.choseTreeList.map(item => {
          if (item.categoryId === data.categoryId) {
            // 二级属性回显
            const Arr2 = [];
            const _Arr2 = []; //包含下标
            const Arr3 = [];
            item.list.map(item => {
              const arr = findAncestorsById(item.stastsId, res.data, "stastsId");
              // console.log("属性编辑回显", data.choseTreeList);
              // console.log("找到父级了", arr);
              if (!Arr2.includes(arr[1].stastsId)) {
                const index1 = filterData.value.findIndex(attr => attr.stastsId === arr[0].stastsId);
                Arr2.push(arr[1].stastsId);
                _Arr2.push({ key: index1, id: arr[1].stastsId });
              }

              //3级属性处理
              if (arr.length === 3) {
                const str3 = [arr[0].stastsId, arr[1].stastsId, arr[2].stastsId].join("-");
                console.log(33333333333, str3);
                Arr3.push(str3);
              }
            });
            //设置默认勾选值
            const defaultArr = [];
            _Arr2.map(_obj => {
              if (!defaultArr[_obj.key]) defaultArr[_obj.key] = [];
              defaultArr[_obj.key].push(_obj.id);
            });
            AttrFilterComRef.value.setDefault(defaultArr || [], item.brandIds || []);

            //三级属性回显
            filterData.value.map(filtObj => {
              filtObj.children.map(filtObj2 => {
                let select = [];
                let _select = [];
                filtObj2.children?.map(filtObj3 => {
                  select = Arr3.filter(obj => obj.includes(filtObj2.stastsId));
                });
                select.map(str => {
                  _select.push(str.split("-")[2]);
                });

                filtObj2.select3 = _select;
              });
            });
          }
        });
      }
    })
    .catch(err => {
      console.log(err);
    });
  getTotal();
};

const handleNodeClick2 = v => {
  data.categoryId = v.categoryId;
  // 给每一项添加 取值范围
  v.minValue = 0;
  v.maxValue = 0;
  v.limitProductNum = 0;
  v.limitProductMoney = 0;
  v.list = [];
  data.choseTreeList.push(v);
  // const uniqueArray = data.choseTreeList.reduce((accumulator, currentItem) => {
  //   const isExisting = accumulator.findIndex(item => JSON.stringify(item) === JSON.stringify(currentItem)) > -1;
  //   console.log(isExisting,"000000000000000");

  //   if (!isExisting) {
  //     accumulator.push(currentItem);
  //   }
  //   return accumulator;
  // }, []);
  // data.choseTreeList = uniqueArray;
  const uniqueArr = data.choseTreeList.reduce((acc, curr) => {
    if (!acc.find(item => item.categoryId === curr.categoryId)) {
      acc.push(curr);
    }
    return acc;
  }, []);
  data.choseTreeList = uniqueArr;
  console.log(uniqueArr, "------00000000");
  // 获取选中的项给顶部的最大值做填值准备
  data.choseTreeList.map((cit, i) => {
    if (cit.preview === v.preview) {
      choseMax.value = i;
    }
  });
  console.log(choseMax.value);
};
// 获取定额主材列表
const getquotaProductList = () => {
  if (route.query.mainProductShowType == 1) {
    //'1'-添加
    quotaProductLists(route.query.quotaId, route.query.num, data.code).then(res => {
      console.log(res);
      data.quotaDate = res.data.productVOList;
      data.costTotalMoney = res.data.costTotalMoney;
      productCheckedNum.value = res.data.productCheckedNum;
      checkType.value = res.data.checkType;
    });
    console.log("获取定额主材");
  } else {
    // '2'-编辑
    quotaProductConditionList(route.query.quotaId, route.query.num).then(res => {
      console.log(res);
      res.data.voList.map(it => {
        it.list = it.productProList;
        it.preview = it.categoryName;
      });
      data.choseTreeList = res.data.voList;
      console.log(2222222222, data.choseTreeList);
      getTotal();
    });
  }
};
const getTotal = () => {
  // totalNum.value = 0;
  // currTotalNum.value = 0;
  console.log("aaaaaaaaaaaaa", data.choseTreeList);
  // console.log("bbbbbbbbbbbb", filterData.value);
  let brandIds = [];
  let stastsId = [];
  data.choseTreeList.map(item => {
    // item.list.map(item2 => {
    //   totalNum.value += item2.productNum;
    // });
    if (item.categoryId === data.categoryId) {
      brandIds = item.brandIds;
      item.list.map(item2 => {
        // currTotalNum.value += item2.productNum;
        if (item2.level === 3) {
          const arr = findAncestorsById(item2.stastsId, filterData.value, "stastsId");
          // console.log("找到父级了", arr);
          const str = arr[1].stastsId + "-" + item2.stastsId;
          stastsId.push(str);
        } else {
          stastsId.push(item2.stastsId);
        }
      });

      console.log("处理后的品牌、属性ids===", brandIds, stastsId);
      if ((stastsId || brandIds) && (stastsId?.length > 0 || brandIds?.length > 0)) {
        getSpListPage({
          categoryId: data.categoryId,
          stastsIdsStr: stastsId,
          brandIds: brandIds,
          size: 9999,
          productType: route.query.num
        })
          .then(res => {
            if (res.code == 200) {
              currTotalNum.value = res.data?.length || 0;
            }
          })
          .catch(err => {
            console.log(err);
          });
      } else {
        currTotalNum.value = 0;
      }
    } else {
      // currTotalNum.value = 0;
    }
  });
};
onMounted(() => {
  getCategoryList();
  getquotaProductList();
  data.checkValue = route.query.mainProductShowType == null ? "1" : route.query.mainProductShowType; //'1'-添加   '2'-编辑
  route.query.mainProductShowType = route.query.mainProductShowType == null ? "1" : route.query.mainProductShowType; //'1'-添加   '2'-编辑
});
// watch(
//   () => data.quotaDate,
//   list => {
//     let sum = list.reduce(
//       (accumulator, currentItem) => accumulator + Number(currentItem.productNumber) * Number(currentItem.clinetRealPrice),
//       0
//     );
//     data.costTotalPrice = sum;
//   },
//   { deep: true }
// );
</script>
<style scoped lang="scss">
:deep(.any-select-any) {
  .el-checkbox__label {
    margin-left: 8px;
  }
}
:deep(.el-tree-node__content) {
  --el-tree-node-content-height: 32px;
}
:deep(.el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content) {
  --el-color-primary-light-9: #d9e8ff;
  color: #007dff;
}
// 组合
.condition-wrap {
  height: calc(100% - 186px);
  overflow: auto;
}
.combination_content {
  display: flex;
  flex-direction: row;
  min-height: calc(100% - 40px);
  padding: 20px;
  .left {
    // flex: 1;
    width: 200px;
    background-color: #f6f8fa;
    border: 1px solid #e2e8f0;
    box-sizing: border-box;
    padding-top: 20px;
    :deep(.el-tree) {
      background-color: transparent !important;
    }
  }
  .center {
    flex: 1;
    background-color: #ffffff;
    display: flex;
    flex-direction: column;
    &_header {
      flex: 1;
      max-height: 64px;
      border-bottom: 1px solid #e2e8f0;
      border-top: 1px solid #e2e8f0;
      box-sizing: border-box;
      display: flex;
      padding: 0 20px;
      justify-content: space-between;
      &_child {
        display: flex;
        align-items: center;
        margin-right: 10px;
        span:nth-child(1) {
          font-size: 16px;
          color: #606266;
          margin: 0 4px 0 0;
          flex: 1;
          min-width: 80px;
          max-width: 100px;
        }
        :deep(.el-input__inner) {
          width: 80px;
        }
      }
    }
  }
  .right {
    width: 360px;
    background-color: #ffffff;
    border: 1px solid #e2e8f0;
    box-sizing: border-box;
    padding: 20px;
    padding-top: 0;
    .header {
      height: 64px;
      color: #86909c;
      display: flex;
      align-items: center;
      font-size: 14px;
      // padding-left: 20px;
    }
    .child_item {
      overflow: hidden;
      .child_item_title {
        width: 100%;
        height: 30px;
        background: #f2f6fc;
        display: flex;
        align-items: center;
        justify-content: space-between;
        // padding: 0 10px;
        span {
          margin: 0 10px;
        }
        i {
          margin: 0 10px;
          cursor: pointer;
        }
      }
      ul {
        display: flex;
        flex-direction: row;
        margin-top: 10px;
        flex-wrap: wrap;
        li {
          padding: 4px 10px;
          box-sizing: border-box;
          border: 1px dashed #ccc;
          box-sizing: border-box;
          margin: 0 10px 10px 0;
          border-radius: 10px;
          display: flex;
          flex-direction: row;
          align-items: center;
          cursor: pointer;
        }
      }
    }
  }
}
.quota_main {
  // display: flex;
  // flex-direction: column;
  position: relative;
  height: 100%;
  overflow-y: auto;
  .quota_main_top {
    height: 62px;
    border-bottom: 1px solid #ccc;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    span {
      font-size: 18px;
      color: #131414;
      margin-left: 30px;
      position: relative;
    }
    span::before {
      content: " ";
      width: 6px;
      height: 6px;
      background-color: #409eff;
      border-radius: 50%;
      position: absolute;
      left: -10px;
      top: 50%;
      transform: translate(-50%, -50%);
    }
  }
  .quota_main_center {
    box-sizing: border-box;
    padding: 20px 20px 0 20px;
    &_top {
      background: #f2f6fc;
      height: 40px;
      padding-left: 20px;
      overflow: hidden;
    }
    &_botton {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin: 25px 0 15px 0;
      div:first-child {
        font-size: 18px;
        color: #3d3d3d;
        span {
          font-size: 18px;
          color: #ff3333;
        }
      }
    }
  }
  .quota_main_botton {
    // height: 44px;
    box-sizing: border-box;
    margin: 0 20px 0px 20px;
    padding-bottom: 20px;
    height: calc(100% - 258px);
    overflow-y: auto;
    border-top: 1px solid #e1e6ed !important;
    border-right: 1px solid #e1e6ed !important;
    border-bottom: 1px solid #e1e6ed !important;
    .jzt-table.el-table {
      border: none !important;
      :deep(.el-table__cell) {
        border-left: 1px solid #e1e6ed !important;
        border-right-color: transparent !important;
      }
    }
  }
  .footer {
    // position: absolute;
    // bottom: 0;
    // left: 0;
    width: 100%;
    background: #fff;
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    align-items: center;
    box-shadow: 0px -3px 10px 0px rgba(4, 24, 48, 0.1);
    height: 64px;
    position: relative;
    z-index: 2;
    border-radius: 0 0 10px 10px;
    display: flex;
    justify-content: space-between;
    .left {
      display: flex;
      p {
        display: flex;
        align-items: center;
        span {
          width: 80px;
          display: inline-block;
          i {
            font-style: normal;
            color: #ff3333;
          }
        }
      }
    }
    button:nth-child(1) {
      margin-right: 10px !important;
    }
    button {
      margin-right: 20px;
    }
  }
}
.center_content {
  padding: 20px;
  .center_content_becurrent {
    padding: 15px;
    .header {
      font-size: 16px;
      color: #000;
      height: 50px;
      display: flex;
      justify-content: space-between;
      .total {
        font-weight: bold;
        color: red;
      }
    }
  }
  .center_content_specification {
    padding: 15px;
    .header {
      font-size: 16px;
      color: #000;
      height: 50px;
    }
  }
}

.attr3 {
  display: flex;
  .child_name {
    margin: 0 10px 0 0;
  }
}
:deep(.el-collapse-item__header) {
  display: none;
}
.sx_chose {
  border-top: 1px solid #eef1f4;
  box-sizing: border-box;
  :deep(.el-collapse-item__header) {
    display: block !important;
    text-align: left;
    position: relative;
    i {
      position: absolute;
      right: 0;
      top: 50%;
    }
  }
}
.secondary {
  :deep(.el-checkbox__input) {
    display: none !important;
  }
  :deep(.el-checkbox) {
    padding: 0 !important;
  }
  .attr2 {
    color: #4e5969 !important;
  }
  :deep(.el-select__wrapper) {
    height: 32px !important;
  }
}
:deep(.el-select__wrapper) {
  height: 32px !important;
}
:deep(.el-collapse) {
  border: none !important;
}
// :deep(.el-checkbox__input) {
//   width: 100px;
//   height: 100%;
//   background: #ffffff;
//   box-shadow: 0px 3px 8px 0px rgba(0, 0, 0, 0.16);
//   border-radius: 4px 4px 4px 4px;
//   padding: 4px 10px;
// }
// :deep(.el-checkbox__label) {
//   position: absolute !important;
//   left: 0 !important;
// }
:deep(.el-checkbox) {
  padding: 1px 8px !important;
}
.active {
  border: 1px solid #007dff;
}
.active-secondary {
  border-bottom: 2px solid #007dff;
}
// :deep(.el-checkbox__inner) {
//   width: 0 !important;
//   height: 0 !important;
//   display: none !important;
// }
:deep(.el-checkbox__label) {
  padding: 0 !important;
}
:deep(.is-checked) {
  color: #000 !important;
}
// :deep(.el-checkbox) {
//   color: #000 !important;
// }
:deep(.el-collapse-item__content) {
  margin-top: 10px;
}
// .filter{
//   // :deep(.el-collapse-item__header){
//   //   display: none !important;
//   // }
// }
.child_name {
  width: auto;
  // height: 100%;
  font-size: 14px;
  color: #3d3d3d;
  display: flex;
  align-items: center;
  cursor: pointer;
  background: #ffffff;
  box-shadow: 0px 3px 8px 0px rgba(0, 0, 0, 0.16);
  border-radius: 4px 4px 4px 4px;
  margin-right: 6px;
  // padding: 5px 19px;
  // overflow: hidden;
  position: relative;
  .attr2 {
    color: #000 !important;
  }
  .check {
    position: absolute;
    right: -1px;
    bottom: -2px;
    img {
      width: 20px;
    }
  }
  :deep(.el-checkbox__input) {
    display: none !important;
  }
}
p,
h1 {
  margin: 0;
  padding: 0;
  font-weight: normal;
}

:deep(.el-collapse-item__header) {
  font-size: 16px;
  color: #3d3d3d;
}

:deep(.el-checkbox-group) {
  display: flex;

  .attr-wrap {
    display: flex;
    align-items: center;
    // border: 1px solid #dcdfe6;
    border-radius: 4px;
    height: 32px;
    // padding: 0 8px;

    &:not(:last-of-type) {
      margin-right: 8px;
    }
  }
}

:deep(.el-checkbox.el-checkbox--small.is-bordered) {
  height: auto;
  height: 32px;

  .el-checkbox__label {
    .attr-wrap {
      display: flex;
      align-items: center;
    }
  }
}
:deep(.el-collapse-head-5) {
  height: 0px !important;
}
.attr-item {
  display: flex;
  align-items: center;
  margin-right: 50px;
}
.reset_box {
  display: flex;
  justify-content: space-between;
  p {
    font-size: 16px;
    color: #3d3d3d;
  }
  button {
    margin-top: 10px;
  }
}
</style>
